<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流量统计系统</title>
    <!-- 引入ECharts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        .chart-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        .chart-item {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 20px;
            height: 400px;
        }
        .chart-item h2 {
            font-size: 18px;
            color: #666;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        #pv-chart {
            grid-column: 1 / 3; /* PV图表占满两列 */
        }
        /* 响应式调整 */
        @media (max-width: 768px) {
            .chart-group {
                grid-template-columns: 1fr;
            }
            #pv-chart {
                grid-column: 1 / 2;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>流量统计系统</h1>
    <div class="chart-group">
        <!-- PV趋势图 -->
        <div class="chart-item" id="pv-chart">
            <h2>最近12小时PV趋势</h2>
            <div id="pv-echart" style="width:100%;height:320px;"></div>
        </div>
        <!-- 框架分布图 -->
        <div class="chart-item">
            <h2>最新小时前端框架分布</h2>
            <div id="framework-echart" style="width:100%;height:320px;"></div>
        </div>
        <!-- UA分布图 -->
        <div class="chart-item">
            <h2>最新小时浏览器UA分布</h2>
            <div id="ua-echart" style="width:100%;height:320px;"></div>
        </div>
    </div>
</div>

<script>
    // 初始化ECharts实例
    const pvChart = echarts.init(document.getElementById('pv-echart'));
    const frameworkChart = echarts.init(document.getElementById('framework-echart'));
    const uaChart = echarts.init(document.getElementById('ua-echart'));

    // 1. 获取并渲染PV趋势图
    function loadPVData() {
        fetch('http://localhost:8080/api/get-pv')
            .then(res => res.json())
            .then(data => {
                if (data.code !== 0) throw new Error(data.msg);
                const xAxisData = data.data.map(item => item.time);
                const seriesData = data.data.map(item => item.value);

                pvChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}: {c} 次访问'
                    },
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                        axisLabel: {
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '访问次数（PV）'
                    },
                    series: [{
                        data: seriesData,
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            color: '#4895ef'
                        },
                        lineStyle: {
                            width: 2
                        }
                    }]
                });
            })
            .catch(err => console.error('加载PV数据失败:', err));
    }

    // 2. 获取并渲染框架分布图
    function loadFrameworkData() {
        fetch('http://localhost:8080/api/get-framework')
            .then(res => res.json())
            .then(data => {
                if (data.code !== 0) throw new Error(data.msg);
                const seriesData = data.data.map(item => ({
                    name: item.name,
                    value: item.value
                }));

                frameworkChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} 次（{d}%）'
                    },
                    series: [{
                        name: '框架分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: seriesData
                    }]
                });
            })
            .catch(err => console.error('加载框架数据失败:', err));
    }

    // 3. 获取并渲染UA分布图
    function loadUAData() {
        fetch('http://localhost:8080/api/get-ua')
            .then(res => res.json())
            .then(data => {
                if (data.code !== 0) throw new Error(data.msg);
                const seriesData = data.data.map(item => ({
                    name: item.name,
                    value: item.value
                }));

                uaChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} 次（{d}%）'
                    },
                    series: [{
                        name: '浏览器分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 8,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: seriesData
                    }]
                });
            })
            .catch(err => console.error('加载UA数据失败:', err));
    }

    // 初始加载所有数据
    loadPVData();
    loadFrameworkData();
    loadUAData();

    // 定时刷新（5分钟一次）
    setInterval(() => {
        loadPVData();
        loadFrameworkData();
        loadUAData();
    }, 300000);

    // 窗口大小变化时重置图表
    window.addEventListener('resize', () => {
        pvChart.resize();
        frameworkChart.resize();
        uaChart.resize();
    });
</script>
</body>
</html>